<template>
	<view class="classify">
		<block v-if="show">
			<!-- <movable-area class="car-btn" :style="{top: top + 'px'}">
				<movable-view direction="all" class="car-btn-img">
					<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/classify/icon6.png" @click="goBrandRank"></image>
				</movable-view>
			</movable-area> -->
			<view class="classify-shadow">
				<u-navbar :is-back="false" title-color="#000000" :border-bottom="false" :height="49">
					<view class="search-box">
						<u-search
							placeholder="搜索您想要的商品"
							:show-action="false"
							:disabled="true"
							@click="search"
							search-icon-color="#000000"
							placeholder-color="#989898">
						</u-search>
					</view>
					<image
						src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/index/scanning.png?v=1"
						class="scanning"
						@click="imgSearch"
						slot="right">
					</image>
				</u-navbar>
			</view>
			<view class="classify-scroll-view">
				<scroll-view scroll-x>
					<view 
						class="classify-item" 
						v-for="(data,index) in space_list" 
						:key="index" 
						@click="goSearchResult('space',data.space_id,data.space_name)">
						<image :src="data.space_logo" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
			<view class="classify-main" :style="{height: classifyMainHeight + 'px'}">
				<view class="classify-main-left" :style="{height: classifyMainHeight + 'px'}">
					<scroll-view scroll-y :style="{height: classifyMainHeight + 'px'}">
						<view
							:class="['classify-main-left-item',{active: classifyIndex==index}]" 
							v-for="(data,index) in classifyLeft" 
							:key="index"
							v-if="data.space_name"
							@click="changeClass(index,data.list,data.space_image,data.space_id)">
							{{data.space_name}}
						</view>
					</scroll-view>
				</view>
				<view class="classify-main-right">
					<scroll-view scroll-y :style="{height: classifyMainHeight + 'px'}" v-if="classifyIndex!=1">
						<view class="Category-1">
							<view class="Category-1-pic" v-if="space_image"><image :src="space_image"></image></view>
							<view class="categoryClassList" v-if="categoryClass.length">
								<view class="categoryClass-item" v-for="(data,index) in categoryClass" :key="index" @click="goSearchResult('class',data.class_id,data.class_name,classifyIndex)">
									<image :src="data.class_image"></image>
									<view class="class-name">{{data.class_name}}</view>
								</view>
							</view>
							<pt-nothing
								text="暂无分类" 
								bgColor="#FFF" 
								icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1" 
								v-else>
							</pt-nothing>
						</view>
					</scroll-view>
					<scroll-view scroll-y :style="{height: classifyMainHeight + 'px'}" v-if="classifyIndex==1">
						<view class="Category-2">
							<view class="styleClassList" v-if="styleClassList.length">
								<view class="styleClass-item" v-for="(data,index) in styleClassList" :key="index" @click="goSearchResult('style',data.style_id,data.style_name)">
									<image :src="data.style_image" mode="widthFix"></image>
								</view>
							</view>
							<pt-nothing 
								text="暂无分类" 
								bgColor="#FFF" 
								icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1" 
								v-else>
							</pt-nothing>
						</view>
					</scroll-view>
					<scroll-view scroll-y :style="{height: classifyMainHeight + 'px'}" v-if="classifyIndex==2 || classifyIndex==3">
						<view class="Category-3">
							<view class="seriesClassList" v-if="seriesClassList.length">
								<view class="seriesClass-item" v-for="(data,index) in seriesClassList" :key="index">
									<view class="seriesClass-item-tit">{{data.style_name}}</view>
									<view :class="['seriesClass-item-list',{'col-3': classifyIndex==3}]">
										<view :class="['seriesClass-item-list-item',{col: classifyIndex==3}]" v-for="(item,i) in data.brand_list" @click="goSearchResult('factory',item.factory_id,item.factory_name)" :key="i">
											<image :src="item.factory_img" v-if="item.factory_img"></image>
											<image :src="item.factory_img" v-else class="empty"></image>
											<block v-if="classifyIndex==2">
												<rich-text :nodes="item.factory_style_sn.replace(/,/g,'\n')"></rich-text>
											</block>
											<block v-else>
												<rich-text :nodes="item.factory_name"></rich-text>
											</block>
										</view>
									</view>
								</view>
							</view>
							<pt-nothing
								text="暂无分类" 
								bgColor="#FFF" 
								icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1"
								v-else>
							</pt-nothing>
						</view>
					</scroll-view>
				</view>
			</view>
		</block>
		<u-tabbar :list="tabbarList" :icon-size="52" :height="100" active-color="#f59359"></u-tabbar>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	import FormData from '@/api/http.interceptor.js'
	export default {
		data() {
			return {
				show: false,
				showHome: false,
				tabbarList: [],
				// 以下为分类页面参数
				space_image: '',
				space_list: [],
				classifyMainHeight: '',
				classifyIndex: 0,
				classifyLeft: [],
				categoryClass: [],
				styleClassList: [],
				seriesClassList: [],
				// 足迹参数
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				},
				// 图片上传地址
				action: `${this.$domain}/api/Upimg/UpImg`,
				formData: FormData.sign(),
				Refresh: false,
				space_id: -2,
				top: 0
			};
		},
		onLoad(options) {
			if(options.parent_id){
				uni.setStorageSync('parent_id',options.parent_id)
				// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl',curPage.$page.fullPath)
				this.$u.api.binding_refer({id: options.parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '绑定失败'
					// })
				})
			}
		},
		onPullDownRefresh() {
			this.Refresh = true
			setTimeout(() => {
				this.getHome()
				this.init()
			},500)
		},
		onShow() {
			this.getHome()
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: ''
				})
			},200)
		},
		onReady() {
			if(uni.getStorageSync('tabbarIconsBefore')){
				if(uni.getStorageSync('userInfo')){
					this.tabbarList[0].iconPath = uni.getStorageSync('tabbarIconsBefore').img1
					this.tabbarList[1].iconPath = uni.getStorageSync('tabbarIconsBefore').img2
					this.tabbarList[2].iconPath = uni.getStorageSync('tabbarIconsBefore').img3
					this.tabbarList[3].iconPath = uni.getStorageSync('tabbarIconsBefore').img4
					this.tabbarList[4].iconPath = uni.getStorageSync('tabbarIconsBefore').img5
				}else{
					this.tabbarList[0].iconPath = uni.getStorageSync('tabbarIconsBefore').img1
					this.tabbarList[1].iconPath = uni.getStorageSync('tabbarIconsBefore').img2
					this.tabbarList[2].iconPath = uni.getStorageSync('tabbarIconsBefore').img4
					this.tabbarList[3].iconPath = uni.getStorageSync('tabbarIconsBefore').img5
				}
			}
			if(uni.getStorageSync('tabbarIcons')){
				if(uni.getStorageSync('tabbarIcons').img2){
					this.tabbarList[1].selectedIconPath = uni.getStorageSync('tabbarIcons').img2
				}
			}
		},
		methods: {
			getHome(){
				this.tabbarList = getApp().globalData.merchantMenu
				// 获取是否显示商户主页
				// if(uni.getStorageSync('userInfo')){
				// 	if(uni.getStorageSync('is_open')){
				// 		this.tabbarList = getApp().globalData.arrowMerchantMenu
				// 	}else{
				// 		// #ifdef MP-WEIXIN
				// 		if(uni.getExtConfigSync().appid==='wx9f2da8a90bb750f7'){
				// 			this.tabbarList = getApp().globalData.merchantMenu.slice(1)
				// 		}else{
				// 			this.tabbarList = getApp().globalData.merchantMenu
				// 		}
				// 		// #endif
				// 		// #ifdef APP-PLUS || H5
				// 		this.tabbarList = getApp().globalData.merchantMenu
				// 		// #endif
				// 	}
				// 	this.$u.api.ShowHome().then(res => {
				// 		let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				// 		if(userInfo.store_id!=res.datas.store_id){
				// 			userInfo.store_id = res.datas.store_id
				// 		}
				// 		if(userInfo.store_name!==res.datas.store_name){
				// 			userInfo.store_name = res.datas.store_name
				// 		}
				// 		uni.setStorageSync('userInfo',JSON.stringify(userInfo))
				// 		if(res.datas.is_open==1){
				// 			this.tabbarList = getApp().globalData.arrowMerchantMenu
				// 			uni.setStorageSync('is_open',true)
				// 		}else{
				// 			uni.setStorageSync('is_open',false)
				// 			// #ifdef MP-WEIXIN
				// 			if(uni.getExtConfigSync().appid==='wx9f2da8a90bb750f7'){
				// 				this.tabbarList = getApp().globalData.merchantMenu.slice(1)
				// 			}else{
				// 				this.tabbarList = getApp().globalData.merchantMenu
				// 			}
				// 			// #endif
				// 			// #ifdef APP-PLUS || H5
				// 			this.tabbarList = getApp().globalData.merchantMenu
				// 			// #endif
				// 		}
				// 	})
				// 	this.$u.api.UserNoticeCount().then(res => {
				// 		if(res.datas){
				// 			this.$set(this.tabbarList[this.tabbarList.length-1],'count',res.datas)
				// 		}else{
				// 			this.$set(this.tabbarList[this.tabbarList.length-1],'count',res.datas)
				// 		}
				// 	})
				// }else{
				// 	// #ifdef MP-WEIXIN
				// 	if(uni.getExtConfigSync().appid==='wx9f2da8a90bb750f7'){
				// 		this.tabbarList = getApp().globalData.arrowDefaultMenu
				// 	}else{
				// 		this.tabbarList = getApp().globalData.defaultMenu
				// 	}
				// 	// #endif
				// 	// #ifdef APP-PLUS || H5
				// 	this.tabbarList = getApp().globalData.defaultMenu
				// 	// #endif
				// }
			},
			init(){
				this.$u.api.CategoryItems({store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:1}).then(res => {
					this.show = true
					this.classifyLeft = res.datas.list
					this.space_list = res.datas.space_list
					this.categoryClass = res.datas.list[0].list
					this.space_image = res.datas.list[0].space_image
					let user_id = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).user_id:0
					this.$u.mpShare = {
						title: '您想要的这里都有',
						path: '/pages/classify/classify?parent_id=' + user_id,
					}
				}).then(() => {
					this.getClassifyMinHeight()
					if(this.Refresh){
						this.Refresh = false
						uni.stopPullDownRefresh({
							success: () => {
								this.classifyIndex = 0
								uni.showToast({
									icon: 'none',
									title: '刷新成功'
								})
							}
						})
					}
				})
			},
			getClassifyMinHeight(){
				this.$nextTick(() => {
					let navBarHeight = 0,
							classifySortHeight = 0
					uni.createSelectorQuery().in(this).select('.classify-scroll-view').boundingClientRect(res => {
						if(res){
							classifySortHeight = res.height
						}
					}).exec(() => {
						uni.createSelectorQuery().in(this).select('.classify-shadow').boundingClientRect(shadowRes => {
							if(shadowRes){
								navBarHeight = shadowRes.height
								this.top = navBarHeight + 10
							}
						}).exec(() => {
							this.classifyMainHeight = uni.getSystemInfoSync().screenHeight - classifySortHeight - navBarHeight - 50
						})
					})
				})
			},
			search(){
				uni.navigateTo({
					url: '/pages/search/search',
					animationDuration: 500,
					animationType: 'slide-in-bottom'
				})
				if(uni.getStorageSync('userInfo')){
					this.addFoot('分类-搜索')
				}
			},
			imgSearch(){
				uni.chooseImage({
					count: 1,
					sizeType: ["original","compressed"],
					sourceType: ["album","camera"],
					success: (choseRes) => {
						uni.uploadFile({
							url: this.action,
							filePath: choseRes.tempFilePaths[0],
							formData: this.formData,
							name: 'file',
							success: (imgUrl) => {
								uni.navigateTo({
									animationDuration: 500,
									url: '/pages/search/search-result?url='+JSON.parse(imgUrl.data).datas[0]
								})
							},
							fail: (fail) => {
								console.log(fail)
							}
						})
					}
				})
			},
			// 切换左侧分类
			changeClass(index,list,space_image,space_id){
				this.space_id = space_id
				this.classifyIndex = index
				if(space_image){
					this.space_image = space_image
				}else{
					this.space_image = ''
				}
				switch (Number(index)){
					case 1:
						this.styleClassList = list?list:[]
						break;
					case 2:
						this.seriesClassList = list?list:[]
						break;
					case 3:
						this.seriesClassList = list?list:[]
						break;
					default:
						this.categoryClass = list?list:[]
						break
				}
			},
			goSearchResult(type,id,name,classifyIndex){
				switch (type){
					case 'space':
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/search/search-result?space_id='+id
						})
						if(uni.getStorageSync('userInfo')){
							this.addFoot('分类-空间-'+name,'#客户浏览'+name+'分类，建议给客户推荐相关热销商品')
						}
						break;
					case 'class':
						if(uni.getStorageSync('userInfo')){
							this.addFoot('分类-'+this.classifyLeft[classifyIndex].space_name+'-'+name,'#客户浏览'+name+'分类，建议给客户推荐相关热销商品')
						}
						if(this.space_id==28 || this.space_id==-2){
							// 为灯具合作客户单独开的分类，调用的商品列表是合作客户的商品  // 去掉自身灯具分类，改为第三方灯具
							switch (Number(id)){
								case 116:
								case 116:  // class_id 116为灯具分类
									uni.navigateTo({
										animationDuration: 500,
										url: '/pages/light/light'
									})
									break;
								default:
									uni.navigateTo({
										animationDuration: 500,
										url: '/pages/search/search-result?class_id='+id
									})
									break;
							}
							return
						}
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/search/search-result?class_id='+id
						})
						break;
					case 'style':
						if(uni.getStorageSync('userInfo')){
							this.addFoot('分类-风格-'+name,'#客户浏览'+name+'分类，建议给客户推荐相关热销商品')
						}
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/search/search-result?style_id='+id
						})
						break;
					case 'factory':
						if(uni.getStorageSync('userInfo')){
							this.addFoot('分类-风格-'+name,'#客户浏览'+name+'分类，建议给客户推荐相关热销商品')
						}
						uni.navigateTo({
							animationDuration: 500,
							url: '/brand-list/brand-info/brand-info?type=1&factory_id='+id
						})
						break;
				}
			},
			addFoot(where,detail){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: this.addFootParam.stay_time,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1,
					detail: detail?detail:''
				})
			},
			goBrandRank(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/brand-rank/brand-rank'
				})
				if(uni.getStorageSync('userInfo')){
					this.addFoot('分类-选品手册','#客户浏选品手册，请保持跟进')
				}
			}
		},
		mounted() {
			this.addFootParam.start_time = parseInt(new Date().getTime() / 1000)
			this.init()
		},
		onHide() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				this.addFoot('查看分类')
			}
		},
	}
</script>

<style lang="scss">
	.scanning{
		width: 40rpx;
		height: 40rpx;
		margin-left: 30rpx;
	}
	.search{
		width: 40rpx;
		height: 40rpx;
		margin-right: 30rpx;
		/* #ifdef MP-WEIXIN */
		margin-right: 0;
		margin-left: 30rpx;
		/* #endif */
	}
	.classify{
		.classify-shadow{
			box-shadow: 10rpx 19rpx 24rpx 0px rgba(40,34,31,0.02);
		}
		.scanning{
			margin-left: 0;
			margin-right: 30rpx;
		}
		.search-box{
			flex: 1;
			margin: 0 40rpx 0 30rpx;
		}
		.classify-scroll-view {
			padding: 60rpx 30rpx;
			scroll-view{
				white-space: nowrap;
				font-size: 0;
				.classify-item{
					display: inline-block;
					margin-right: 30rpx;
					&:last-child{
						margin-right: 0;
					}
					image{
						width: 140rpx;
						height: 160rpx;
					}
				}
			}
		}
		.classify-main{
			position: relative;
			display: flex;
			.classify-main-left{
				width: 170rpx;
				background-color: #F8F8F8;
				min-height: 100%;
				.classify-main-left-item{
					text-align: center;
					height: 100rpx;
					line-height: 100rpx;
					position: relative;
					color: #5C5C5C;
					&.active{
						color: #000;
						background-color: #FFF;
						font-size: 32rpx;
						font-weight: bold;
						&::before{
							content: '';
							position: absolute;
							width: 6rpx;
							height: 40rpx;
							background-color: #F18739;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}
			.classify-main-right{
				flex: 1;
				.Category-1{
					padding: 0 30rpx 30rpx;
					.Category-1-pic{
						image{
							width: 100%;
							height: 190rpx;
							border-radius: 10rpx;
						}
					}
					.categoryClassList{
						display: flex;
						flex-wrap: wrap;
						.categoryClass-item{
							width: 33.3333%;
							text-align: center;
							margin-top: 40rpx;
							image{
								width: 110rpx;
								height: 110rpx;
								border-radius: 50%;
							}
							.class-name{
								font-size: 26rpx;
								color: #000;
								margin-top: 20rpx;
							}
						}
					}
				}
				.Category-2{
					padding: 0 30rpx 30rpx;
					.styleClassList{
						.styleClass-item{
							margin-bottom: 40rpx;
							&:last-child{
								margin-bottom: 0;
							}
							image{
								width: 100%;
								max-height: 250rpx;
								border-radius: 10rpx;
							}
						}
					}
				}
				.Category-3{
					padding: 0 30rpx 30rpx;
					.seriesClassList{
						.seriesClass-item{
							margin-bottom: 50rpx;
							&:last-child{
								margin-bottom: 0;
							}
							.seriesClass-item-tit{
								font-weight: bold;
								font-size: 28rpx;
							}
							.seriesClass-item-list{
								display: flex;
								flex-wrap: wrap;
								justify-content: space-between;
								&.col-3{
									justify-content: flex-start;
									.seriesClass-item-list-item{
										width: 30%;
										margin-right: 5%;
									}
									.seriesClass-item-list-item:nth-child(3n){
										margin-right: 0;
									}
								}
								.seriesClass-item-list-item{
									display: flex;
									align-items: center;
									box-shadow: 6rpx 12rpx 40px 0px rgba(40,34,31,0.05);
									border-radius: 10rpx;
									width: 245rpx;
									margin-top: 30rpx;
									padding: 30rpx 20rpx;
									&.col{
										flex-direction: column;
										image{
											margin-right: 0;
											margin-bottom: 30rpx;
										}
										rich-text{
											font-weight: normal;
										}
									}
									image{
										width: 90rpx;
										height: 90rpx;
										margin-right: 30rpx;
										border-radius: 8rpx;
										&.empty{
											background-color: #EEE;
										}
									}
									rich-text{
										flex: 1;
										min-width: 0;
										font-size: 28rpx;
										color: #111;
										font-weight: bold;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	.car-btn{
		position: fixed !important;
		left: 0;
		top: 44px;
		bottom: 60px;
		left: 5px;
		right: 5px;
		pointer-events: none;
		z-index: 20;
		width: auto;
		height: auto;
		.car-btn-img{
			position: absolute !important;
			width: 80rpx;
			height: 80rpx;
			pointer-events: auto;
			border-radius: 50%;
			top: initial;
			left: initial;
			right: 0;
			bottom: 0;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			text-align: center;
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
</style>
